<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>商品信息管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/layui/layui.js"></script>

</head>
<body>
<%--  搜索行--%>
<div class="demoTable">
    书名：
    <div class="layui-inline">
        <input class="layui-input" placeholder="请输入书名" name="bookname" id="bookname" autocomplete="off">
    </div>
    <button class="layui-btn" data-type="reload" id="search">搜索</button>
</div>
<table class="layui-table" id="test"  lay-filter="test"></table>


<%--库存表表头栏--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container" >
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
        <button class="layui-btn layui-btn-sm" lay-event="createTable">新增图书</button>
    </div>
</script>

<!--数据表格右侧按钮组-->
<script type="text/html" id="barDemo">
    {{#  if(d.status == 1){ }}
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="sj">上架</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>
    {{#  } else { }}
    <div class="layui-btn-group">
        <a class="layui-btn layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="sj">下架</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </div>
    {{#  } }}
</script>
<%--表单编辑--%>
<form id="formData" lay-filter="formData" style="display: none" class="layui-form">
    <input type="text" name="bookid" hidden>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">图书名称</label>
            <div class="layui-input-inline">
                <input type="text" name="bookname" placeholder="请输入书名" lay-verify="bookname" autpcomplete="off"  class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">图书类型</label>
        <div class="layui-input-inline">
            <select id="typeSelect" name="typeid" lay-filter="type">
                <option value="">请选择</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline">
                <input type="text" name="author" placeholder="请输入作者"   class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-inline">
                <input type="text" name="count" placeholder="请输入数量" lay-verify="count"  class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-inline">
                <input type="text" name="remark" placeholder="请输入备注" lay-verify="remark"  class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item">
    <div class="layui-bg-inline">
        <label class="layui-form-label">出版社</label>
        <div class="layui-input-inline">
            <input type="text" name="publisher" placeholder="请输入出版社" lay-verify="publisher"  class="layui-input">
        </div>
    </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
        <label class="layui-form-label">进价</label>
        <div class="layui-input-inline">
            <input type="text" name="price" placeholder="请输入出版社" lay-verify="price"  class="layui-input">
        </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">售价</label>
            <div class="layui-input-inline">
                <input type="text" name="selling" placeholder="请输入售价" lay-verify="selling"  class="layui-input">
            </div>
        </div>
    </div>
<%--    文件上传--%>
    <div class="layui-upload">
        <button type="button" class="layui-btn" id="test2">图片上传</button>
        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
            预览图：
            <div class="layui-upload-list" id="demo2"></div>
        </blockquote>
    </div>
    <%--用来存储图片上传成功后返回的url--%>
    <input hidden type="text" id="imgurlCode" name="imgurlCode"/>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <input type="submit" class="layui-btn" lay-submit lay-filter="btn" value="提交">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</body>
<script type="text/javascript">
    layui.use(['table','form','jquery','layer','upload'], function() {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var upload = layui.upload;

        //图片上传
        upload.render({
            elem: '#test2'
            ,url: '${pageContext.request.contextPath}/book/upload' //改成您自己的上传接口
            //,multiple: true
            ,//用于文件上传前的回调
            choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" width="60px" height="60px">')
                });
            }
            ,done: function(res){//上传成功后的回调函数
               // alert(res.imgurlCode);
                $("#imgurlCode").val(res.imgurlCode);//将上传成功后得到的图片的url返回，并且赋值给表单中隐藏url框
                layer.msg('上传成功',{icon: 1});
            }
        });

        $(function () {
            //当页面加载完成后执行的事件
            showTable();
            aaa();

        });

        // //监听指定开关
        // form.on('switch(switchTest)', function(data){
        //     // layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
        // });

        //页面加载完成后，填充书籍类型下拉框
        function aaa() {
            $.ajax({
                type:"get"
                ,url:'${pageContext.request.contextPath}/type/getAllType'
                ,dataType:'json'
                ,success:function (typeData) {
                    for(var i=0;i<typeData.length;i++){
                        $("#typeSelect").append(
                            $("<option>").attr("value",typeData[i].typeid).html(typeData[i].typename)
                        )
                    }
                    form.render('select','formData');
                }
            })
        }


        //加载商品表
        function showTable(){
            table.render({
                elem: '#test'
                ,url:'${pageContext.request.contextPath}/book/getAllBook'
                ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                ,totalRow: true
                ,"close": true //开关状态
                ,title: '商品信息'
                ,cols: [[
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'bookid', title:'ID', edit: 'text',totalRowText: '合计'}
                    ,{field:'bookname', title:'图书名称', unresize: true, sort: true}
                    ,{field:'author', title:'作者',sort: true }
                    ,{field:'count', title:'数量',  edit: 'text',sort: true, totalRow: true}
                    ,{field:'remark', title:'备注',  edit: 'text',sort: true}
                    ,{field:'typename', title:'图书类型', edit: 'text', sort: true}
                    ,{field:'selling', title:'售价',sort: true}
                    ,{field:'status', title:'状态', sort: true,templet: function(d){
                            if (d.status==0){
                                return "<button class='layui-btn layui-btn-xs layui-btn-danger'>上架</button>";
                            }else{
                                return "<button class='layui-btn layui-btn-xs layui-btn-normal'>下架</button>";
                            }
                        }}
                    ,{field:'publisher', title:'出版社'}
                    ,{field:'imgurlCode', title:'图片',sort: true,templet:function (d){
                        return '<img src="'+d.imgurlCode+'" width="100px" height="50px"/>';
                        }}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
                ]]
                ,page: true
                ,limit:5
                ,limits:[3,5,10,15]
                ,text:{
                    none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
                }
            });
        }

        //搜索
        $("#search").click(function () {

            //执行重载
            table.reload('test',{
                page:{
                    curr:1//重新从第一页开始
                }
                ,where:{
                    bookname:$("#bookname").val()
                }
            },'data')
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case'createTable':
                    $("#formData")[0].reset();
                    layer.open({
                        type: 1 //此处以iframe举例
                        ,title: '新增书籍'
                        ,maxmin: true
                        ,offset: '100px'
                        ,area:['380px','360px']
                        ,content: $("#formData")
                    });
                    showTable();
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){
            var data = obj.data;
                //编辑
            if(obj.event === 'edit'){
                $("#formData")[0].reset();
                layer.open({
                    type: 1 //此处以iframe举例
                    ,title: '新增书籍'
                    ,maxmin: true
                    ,offset: '100px'
                    ,area:['380px','360px']
                    ,content: $("#formData")
                });
                //填充选中行数据到指定表单
                form.val('formData', data);
            }else if(obj.event === 'sj'){
                $.get('${pageContext.request.contextPath}/book/updateStatus',{"status":data.status,"bookid":data.bookid},function (result){
                    if (result.code == 1 ){
                        showTable();
                        layer.msg(result.msg, {icon: 1});
                    }else{
                        layer.msg(result.msg, {icon: 5});
                    }
                },'json')
            }else if(obj.event === 'del'){
                //alert(data.bookname);
                layer.confirm('真的删除行么', function(index){
                    $.post('${pageContext.request.contextPath}/book/deleteBook',{"bookid":data.bookid},function (delobj){
                        if (delobj.code==1){
                            //alert(delobj.msg);
                            layer.msg(delobj.msg, {icon: 1});
                            showTable();
                        }else {
                            layer.msg(delobj.msg, {icon: 5});
                        }
                    },'json')
                    layer.closeAll();
                });
            };
            });

        /**
         * 监听表单提交
         */
        form.on('submit(btn)', function(data){
            //alert("dffff");
            $.ajax({
                type:'post',
                url:'${pageContext.request.contextPath}/book/updateBook',
                dataType: 'json',
                data:data.field,
                success:function (result){
                    layer.closeAll();
                    if (result.code ==1 ){
                        layer.msg(result.msg, {icon: 1});
                        showTable();
                    }else{
                        layer.msg(result.msg, {icon: 5})
                    }
                }
            });
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

</script>
</html>
